<template>
  <button class="y_button" :class="[type==='primary'?'primary':(type==='error'?'error':'default'),border?'border':'']">{{title}}</button>
</template>

<script lang='ts'>
export default {
 name: 'YButton',
 props:{
     title:{
         default: '按钮',
         type: String,
         required: true
     },
     type:{
         default: 'default',
         type: String
     },
     border:{
         default:false,
         type: Boolean
     }
 }
}
</script>

<style lang='scss'>
  .y_button{
      &.border{
          border-radius: 20px;
      }
      &.default{
          background: #fff;
          color: #0095ff;
          &:active{
              background: #f8f8f8;
          }
      }
      &.primary{
          background: #0095ff;
          color: #fff;
          &:active{
              background: #006eff;
          }
      }
      &.error{
          background: #ff0000;
          border: 1px solid #ff0000;
          color: #fff;
          &:active{
              background: #eb0808;
              border: 1px solid #eb0808;
          }
      }
      padding: 6px 18px;
      border: 0;
      outline: 0;
      border-radius: 3px;
      border: 1px solid #0095ff;
      cursor: pointer;
  }
</style>